<template>
    <div id="LoginPage">
        <div class="editor">
            <mavon-editor v-model="content" :toolbars="option"/>
            <a-button @click="submit()" :save="save()">提交</a-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username: '',
                password: '',
                option:{
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    help: true, // 帮助
                    htmlcode: true, // 展示html源码
                    subfield: true, // 单双栏模式
                    save: true
                },
                content: ''
            };
        },
        methods: {
            submit() {
                alert(this.content)
            },
            save(){
                //保存正在编辑的内容
                let storage = window.localStorage;
                let art = this.content;
                if (art.trim() != '') {
                    storage.setItem("tempArticle", this.content);
                }
            }
        },
        created() {
            let storage = window.localStorage;
            let art = storage.getItem("tempArticle");
            //如果有编辑记录就从上一次编辑的地方开始
            if (art != 'null') {
                this.content = art;
                console.log("已有记录，从上一次编辑开始......")
            }
        }
    }
</script>

<style scoped>
    #LoginPage {
        padding-top: 5%;
    }
    .editor{
        width: 96%;
        margin-left: 2%;
    }
</style>